<template>
    <div class="pagination-container">
        <el-pagination
                :background="background"
                :current-page.sync="mCurrentPage"
                :page-size.sync="mPageSize"
                :total="totalDataNum*1"
                :page-sizes="pageSizeArray"
                :layout="layout"
                v-bind="$attrs"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';

    @Component({
        components: {},
        name: "Pagination"
    })
    export default class Pagination extends Vue {
        @Prop({default: () => [10, 20, 30, 50, 100, 500]}) private pageSizeArray!: Array<any>; //分页大小数组
        @Prop({default: 'total, sizes, prev, pager, next, jumper'}) private layout: any;//
        @Prop({default: 1}) private currentPage: any; //当前页
        @Prop({default: 0}) private totalDataNum: any;//总页数
        @Prop({default: 20}) private pageSize: any;//分页大小
        @Prop({default: true}) private background: any;//
        @Prop({default: true}) private autoScroll: any;//
        @Prop({default: false}) private hidden: any;//

        get mCurrentPage() {
            return this.currentPage * 1
        }

        set mCurrentPage(val: any) {
            this.$emit('update:currentPage', (val * 1))
        }

        get mPageSize() {
            return this.pageSize * 1
        }

        set mPageSize(val: any) {
            this.$emit('update:pageSize', (val * 1))
        }

        handleSizeChange(val: any) {
            this.$emit('pagination', {currentPage: (this.mCurrentPage * 1), pageSize: (val * 1)});
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        };

        handleCurrentChange(val: any) {
            this.$emit('pagination', {currentPage: (val * 1), pageSize: (this.mPageSize * 1)});
            if (this.autoScroll) {
                scrollTo(0, 800)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pagination-container {
        background: #fff;
        padding: 32px 16px;
    }

    .pagination-container.hidden {
        display: none;
    }
</style>
